<script setup lang='tsx' name='Login'>
import { captchaSvgApi, loginApi, registerApi } from '@/api';
import type { FormInstance, FormRules } from 'element-plus';
import type { RegisterForm } from '@/types/login'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router';
//@ts-ignore
import { useTemplateRef } from 'vue'
const userStore = useUserStore()
const router = useRouter()
const captcha = ref('')
captchaSvgApi().then(({ data }) => captcha.value = data.img)
const formRef = useTemplateRef<FormInstance>('formRef')

const form = reactive<RegisterForm>({
    username: '',
    password: '',
    againPassword: '',
    nickName: '',
    email: '',
    captcha: ''
})
const validatePass2 = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请在此输入密码'))
    } else if (value !== form.password) {
        callback(new Error("两次密码不一致"))
    } else {
        callback()
    }
}
const rules = reactive<FormRules<RegisterForm>>({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
    ],
    againPassword: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        { validator: validatePass2, trigger: 'blur' }
    ],
    nickName: [
        { required: true, message: '请输入昵称', trigger: 'blur' },
        {
            min: 3, max: 10, message: '长度在 3 到 10'
        }
    ],
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change']
        }
    ],
    captcha: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        { min: 4, max: 4, message: '长度在 4 个字符', trigger: 'blur' }
    ]
})

const isLogin = ref(true)
function handleClick(type: boolean) {
    isLogin.value = type
}
watch(() => isLogin.value, () => {
    formRef.value?.resetFields()
})
async function submit() {
    if (isLogin.value) {
        const { data } = await loginApi(form)
        userStore.token = data
        router.push('/')
        console.log(data, '登录成功');

    } else {
        const { data } = await registerApi(form)
    }
}
</script>

<template>
    <div class='login-container '>
        <div class="login-content  w400px   pa-64px">
            <div class="login-title flex-center gap-30px font-700 font-size-24px">
                <span transition-all :class="{ active: isLogin }" cursor="pointer" @click="handleClick(true)">登录</span>
                <span transition-all :class="{ active: !isLogin }" cursor="pointer"
                    @click="handleClick(false)">注册</span>
            </div>
            <el-form ref="formRef" style="width: 100%" :model="form" :rules="rules" label-width="auto"
                class="login-form" status-icon>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username" placeholder="请输入用户名" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" type="password" placeholder="请输入登录密码" show-password />
                </el-form-item>
                <el-form-item v-if="!isLogin" label="确认密码" prop="againPassword">
                    <el-input v-model="form.againPassword" type="password" placeholder="请再次输入密码" show-password />
                </el-form-item>
                <el-form-item v-if="!isLogin" label="昵称" prop="nickName">
                    <el-input v-model="form.nickName" placeholder="请输入昵称" />
                </el-form-item>
                <el-form-item v-if="!isLogin" label="邮箱" prop="email">
                    <el-input v-model="form.email" placeholder="请输入邮箱" />
                </el-form-item>
                <el-form-item v-if="!isLogin" label="验证码" prop="captcha">
                    <div class="flex flex-items-center flex-justify-between w100% gap-24px">
                        <el-input v-model="form.captcha" placeholder="请输入验证码" class="flex-1" />
                        <img style="height: 100%;width: auto;min-width: 100px;" :src="captcha" alt="验证码">
                    </div>
                </el-form-item>
            </el-form>
            <el-button type="primary" style="width: 100%;" @click="submit">{{ isLogin ? "登录" : "注册" }}</el-button>
        </div>
    </div>
</template>

<style lang='scss' scoped>
.login-container {
    background-color: #f0eff2;
    height: 100%;
    padding-top: 10%;
    box-sizing: border-box;

    .login-content {
        border: 1px solid #efefef;
        background-color: #fff;
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto;

        .login-title {
            color: #999;
            margin-bottom: 30px;

            .active {
                color: #333;
            }
        }

        .login-form {
            margin: 30px 0;
        }
    }
}
</style>